<template>
  <page-layout class="task-detail">
    <a-card>
      <a-button size="large" @click="$router.go(-1)">返回</a-button>
      <a-row style="margin-top: 20px">
        <a-col :span="12">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
             <a-form-item label="所属部门">
              <a-input
                :value="detailData.department_name || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            <a-form-item label="项目名称">
              <a-input
                :value="detailData.name || '无'"
                disabled
                size="large"
              />
            </a-form-item>
               <a-form-item label="产品简介">
          <div
            style="
              border: 1px solid #d9d9d9;
              border-radius: 4px;
              padding: 10px 10px;
              min-height: 70px;
            "
            v-html="detailData.summary || '无'"
          ></div>
        </a-form-item>
            <a-form-item label="负责人">
              <a-input
                :value="detailData.author_name || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            
          
          </a-form>
        </a-col>
        <a-col :span="12">
          <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-form-item label="创建时间">
              <a-input
                :value="detailData.created_at || '无'"
                disabled
                size="large"
              />
            </a-form-item>
            <a-form-item label="产品版本号" :class="{ green: false, blue: true }">
              <a-input
                :value="detailData.version_id || '暂无发布版本'"
                disabled
                size="large"
              />
              <!-- {{ detailData }} -->
            </a-form-item>
            <a-form-item label="测试负责人">
              <a-input
                :value="detailData.test_name || '无'"
                disabled
                size="large"
              />
            </a-form-item> 
            <a-form-item label="发布负责人">
              <a-input
                :value="detailData.deploy_name || '无'"
                disabled
                size="large"
              />
            </a-form-item>
           <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
       
      </a-form>
          </a-form>
        </a-col>
      </a-row>
      <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="产品内容">
          <div
            style="
              border: 1px solid #d9d9d9;
              border-radius: 4px;
              padding: 10px 10px;
              min-height: 70px;
            "
            v-html="detailData.content || '无'"
          ></div>
        </a-form-item>
            <a-form-item label="附件">
          <a-empty
            v-if="
              !detailData.attachment_url || detailData.attachment_url.length === 0
            "
            description="暂无附件"
          ></a-empty>
          <div v-else class="enclosure-wrapper">
            <div
              class="enclosure-item"
              v-for="file in detailData.attachment_url"
              :key="file.uid"
            >
              <a-icon type="file-zip" theme="twoTone" style="font-size: 50px" />
              <a
                :href="
                  file.response && file.response.data && file.response.data.url
                "
                download
                class="enclosure-content"
                >{{ file.name }}</a
              >
            </div>
  
          </div>
        </a-form-item>
      </a-form>
    </a-card>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import { detail } from "@/services/produce";
export default {
  components: { PageLayout },
  data() {
    return {
      team: "",
      detailData: {}
    };
  },
  computed: {},
  created() {
    this.getDetailData();
  },
  methods: {
    getDetailData() {
      detail(this.$route.query.id).then((res) => {
        // detail(22).then((res) => {
        if (res.data.code !== 20000)
          this.$message.error(res.data.message || "数据加载失败，请刷新重试~");
        this.detailData = res.data.data;
        // 团队人员单独处理
        this.team = this.detailData.team.map((item) => item.name).join(",");
        console.log(res.data.data, "getDetailData");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.task-detail {
  .ant-input[disabled] {
    color: #333333;
    background-color: #fff;
    font-size: 16px;
  }
  .blue {
    .ant-input[disabled] {
      color: #2591ff;
      background-color: #fff;
      font-size: 16px;
    }
  }
  .green {
    .ant-input[disabled] {
      color: #00ca13;
      background-color: #fff;
      font-size: 16px;
    }
  }
  .enclosure-wrapper {
    display: flex;
    // margin-top: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    // align-content: space-between;
    .enclosure-item {
      // margin-top: 20px;
      width: 10%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-content: center;
      text-align: center;
      .enclosure-content {
        margin-top: 15px;
      }
    }
  }
}
</style>
